<!--
 * @Author: your name
 * @Date: 2021-08-15 21:56:29
 * @LastEditTime: 2021-08-18 13:15:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Self\hrsaas-86\src\components\imageUpload\index.vue
-->
<template>
  <div>
    <!-- list-type 上传组件的列表样式
         action是一个必须填写的参数, 表示上传的图片地址, action给地址 选择完图片后会自动以post的方式提交到对应的服务器上
         file-list 展示的图片列表 数组包对象
         :on-preview 点击文件列表中的图片 会触发的方法 方法中有一个参数 file 就是被点击的图像的信息(对象)
         limit  限制上传图片的数量(如果已经上传两张,就隐藏添加图片的按钮)
      -->
    <el-upload
      list-type="picture-card"
      action="#"
      :file-list="fileList"
      :on-preview="handlePreview"
      :limit="limit"
      :class="{ myupload: isShow }"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :before-upload="beforeUpload"
      :on-change="handleChange"
    >
      <!-- on-preview	点击文件列表中已上传的文件时的钩子	function(file)	—	—
on-remove	文件列表移除文件时的钩子	function(file, fileList)	—	—
on-success	文件上传成功时的钩子	function(response, file, fileList)	—	—
on-error	文件上传失败时的钩子	function(err, file, fileList)	—	—
on-progress	文件上传时的钩子	function(event, file, fileList)	—	—
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)
http-request	覆盖默认的上传行为，可以自定义上传的实现	function
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。	function(file)-->
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 图像预览的对话框组件 -->
    <el-dialog
      :visible="showStaffPhoto"
      width="30%"
      title="图像预览"
      @close="showStaffPhoto = false"
    >
      <img :src="url" width="100%">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
var cos = new COS({
  SecretId: 'AKIDBBuObeRzGGyPbV8UZNt87pGQJwHL8fwv',
  SecretKey: 'jCOIvGL9hz0kDOJxKQFn32jAKo4C2cuv'
})
export default {
  name: 'Upload',
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [
        // {
        //   url:
        //     'https://img1.baidu.com/it/u=3608510549,1695891924&fm=26&fmt=auto&gp=0.jpg'
        // },
        // {
        //   url:
        //     'https://img0.baidu.com/it/u=2335292160,1862920530&fm=224&fmt=auto&gp=0.jpg'
        // }
      ],
      // 控制图像预览的对话框组件展示的布尔值
      showStaffPhoto: false,
      // 对话框图像的url地址
      url: ''
      // limit: 2 // 限制上传图片的数量
    }
  },

  computed: {
    isShow() {
      return this.fileList.length >= this.limit
    },
    isAllSuccessed() {
      // 所有的图片的status状态 success 才能进行保存
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    handlePreview(file) {
      // 被点击的图像信息
      console.log(file) // 自行准备对话框组件 准备数据 在对话框中显示图片
      this.url = file.url
      this.showStaffPhoto = true
    },
    handleRemove(file, fileList) {
      // console.log(file, '==>', fileList)
      // file是移出的文件的对象fileList是剩余的文件列表
      // 将剩下的文件列表同步给data中的fileList
      this.fileList = [...fileList]
    },
    handleUpload({ file }) {
      console.log(file.uid)
      const obj = this.fileList.find(item => item.uid === file.uid)
      // 自定义上传动作 有个参数 有个file对象
      // console.log(obj.file)
      cos.putObject(
        {
          Bucket: 'hr-86-1306974474' /* 必须 存储桶名称 */,
          Region: 'ap-shanghai' /* 存储桶所在地域，必须字段 */,
          Key:
            +new Date() +
            file.name /* (字符串类型) 必须 上传到腾讯云存储的图片的名称 key保证唯一性*/,
          StorageClass: 'STANDARD', // 标准的存储方案
          Body: file, // 上传文件对象
          // 上传期间触发的函数, 受网络影响多次触发
          onProgress: progressData => {
            // 将函数改成箭头函数, 后期会处理到data中的数据
            // progressData 是一个对象 loaded已上传 total总文件大小 speed上传的速度 percent 上传的进度
            console.log(JSON.stringify(progressData))
            // 处理上传进度条状态
            obj.status = 'uploading'
            // 处理上传的进度条百分比值
            obj.percentage = parseInt(progressData.percent * 100)
          }
          // 上传完成后的处理函数 有可能会成功 有可能会失败
        },
        (err, data) => {
          // 上传成功会打印data,失败会得到err对象
          // console.log(err || data)
          if (err) return this.$message.error('上传失败,请稍后重试')
          // 上传完成 得到data  data中有一个location字段  就是腾讯云存储的图像地址
          console.log(data.Location)
          // 将腾讯云返回的地址存储到数据库中
          obj.url = 'https://' + data.Location
          // 将上传成功后的对象的状态改成 success
          obj.status = 'success'
          this.$message.success('上传图片成功')
        }
      )
    },
    //  配置上传前的校验, 只要通过校验, 才能进行上传
    // return false 会中止上传
    beforeUpload(file) {
      // console.log(file)
      const { type, size } = file
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      // 1.文件类型的校验
      if (!types.includes(type)) {
        this.$message.error('上传的图片格式, 必须是jpg, gif, bmp, png的格式!')
        return false
      }
      console.log(size)
      // 2.文件大小的限制
      if (size / 1024 / 1024 >= 5) {
        this.$message.error('上传头像过大, 超过了5M, 必须5M以内')
        return false
      }
      return true
    },
    handleChange(file, fileList) {
      // file是上传的文件的对象 fileList是最新的文件列表
      // 将剩下的文件列表同步给data中的fileList
      this.fileList = [...fileList]
    }
  }
}
</script>
<style lang="scss" scope>
.myupload {
  .el-upload--picture-card {
    display: none;
  }
}
</style>
